<template>
  <el-form class="latlong" :model="dmf" :disabled="disabled" ref="latlong" :rules="rules" :isLat="isLat">
    <!--    <span slot="label"><span style="color: #F56C6C;margin-right: 3px;">*</span></span>-->
    <el-form-item prop="du">
      <el-input
        :rules="rules.du"
        type="number"
        v-model="dmf.du"
        :disabled="disabled"
        @change="inputChange('du')"
        size="mini"
      >
      </el-input>
      <span>
          <i slot="suffix">°</i>
    </span>
    </el-form-item>
    <el-form-item prop="fen">
      <el-input
        type="number"
        :rules="rules.fen"
        v-model="dmf.fen"
        @change="inputChange('fen')"
        :disabled="disabled"
        size="mini"
      >
      </el-input>
      <span>
        <i slot="suffix">′</i>
    </span>
    </el-form-item>
    <el-form-item prop="miao">
      <el-input
        type="number"
        :rules="rules.miao"
        v-model="dmf.miao"
        @change="inputChange('miao')"
        :disabled="disabled"
        style="width: 120px"
        size="mini"
      >
      </el-input>
      <span>
      <i slot="suffix">″</i>
    </span>
    </el-form-item>
  </el-form>
</template>
<script>
require('math')
export default {
  name: 'LatLong',
  props: {
    disabled: Boolean,
    dmf: Object,
    isLat: Boolean
  },
  data() {
    return {
      rules: {
        du: [
          { required: true, message: '请输入度', trigger: 'blur' }
        ],
        fen: [
          { required: true, message: '请输入分', trigger: 'blur' }
        ],
        miao: [
          { required: true, message: '请输入秒', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    getData() {
      return this.dmf
    },
    inputChange(key) {
      let max = this.isLat ? 89 : 179
      key !== 'du' ? max = 59 : null
      let value = this.dmf[key]
      switch (key) {
        case 'du':
        case 'fen':
          value = parseInt(value, 10)
          break
        case 'miao':
          max = 59.99999999
          break
      }
      if (isNaN(value)) {
        value = 0
      }
      value = value < 0 ? 0 : value
      value = value > max ? max : value
      this.$set(this.dmf, key, value)
      this.returnValue()
    },
    returnValue() {
      this.$emit('latlonInput', this.dmf)
    },
    validate() {
      let flag = false
      this.$refs.latlong.validate(valid => {
        console.log('valid:' + valid)
        if (valid) {
          flag = true
        } else {
          flag = false
        }
      })
      return flag
    }
  }
}
</script>
<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type='number'] {
  -moz-appearance: textfield;
}
</style>
<style lang="scss" scoped>
.latlong {
  width: fit-content;
  display: inline-flex
}

.el-input {
  width: 60px;
}

.i {
  font-size: 15px;
  color: gray
}
</style>
